<script lang="ts" setup>
// import type { DescData } from '@arco-design/web-vue'
import type { AreaItem } from '@/apis/model/resolve'
import { Message } from '@arco-design/web-vue'
import { useClipboard } from '@vueuse/core'

interface IProps {
  record?: AreaItem
}
const props = withDefaults(defineProps<IProps>(), {})
const visible = defineModel<boolean>('visible', { required: true })

const { copy } = useClipboard({
  legacy: true,
})
const content = ref('')
const secretKey = ref('')
// const licenseInfo = ref<DescData[]>([])
const radioValue = ref(1)
function handleCopy() {
  if (radioValue.value === 1) {
    copy(String(content.value)).then(() => {
      Message.success('复制成功')
    })
  } else if (radioValue.value === 2) {
    copy(String(secretKey.value)).then(() => {
      Message.success('复制成功')
    })
  }
}

// const licenseSource = computed(() => {
//   if (props.source === 1)
//     return '手动上传'
//   if (props.source === 2)
//     return '系统托管'
//   return '-'
// })

async function handleBeforeOpen() {
  try {
    // const res = await getSwitcherListApi({ id: props.certId ?? '' })
    content.value = props.record.crt ?? ''
    secretKey.value = props.record.private_key ?? ''
  } catch (error) {
    console.error(error)
    return true
  }
}
function handleCancel() {}

function convertWildcardToUnderscore(domain: string | undefined) {
  if (typeof domain !== 'string') {
    return domain
  }
  return domain.replace(/^\*/, '_')
}

async function handleSubmit() {
  const domainName
    = convertWildcardToUnderscore(props.record.domain.split(',')?.[0]) || 'cert'
  createCertZip(
    content.value,
    secretKey.value,
    `${domainName}.zip`,
    `${domainName}.pem`,
    `${domainName}.key`,
  )
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="证书下载"
    :width="640"
    :mask-closable="false"
    :before-open="handleBeforeOpen"
    :cancel="handleCancel"
    ok-text="下载证书"
    cancel-text="关闭"
    :before-ok="handleSubmit"
  >
    <div class="flex flex-col gap-y-6">
      <div class="flex justify-between">
        <a-radio-group
          v-model="radioValue"
          type="button"
        >
          <a-radio :value="1">
            证书文件
          </a-radio>
          <a-radio :value="2">
            证书私钥
          </a-radio>
        </a-radio-group>
        <div
          class="flex cursor-pointer items-center gap-x-1 text-primary"
          @click="handleCopy"
        >
          <i-icons-copy />
          复制
        </div>
      </div>
      <!-- <a-descriptions
        v-if="radioValue === 1"
        :data="licenseInfo"
        :column="2"
        :label-style="{ width: '56px', marginRight: '16px' }"
        size="large"
        layout="inline-horizontal"
      /> -->
      <div class="license-wrap">
        {{ radioValue === 1 ? content : secretKey }}
      </div>
    </div>
  </resource-dialog>
</template>

<style lang="less" scoped>
.license-wrap {
  @apply h-60 ! py-2 px-3 bg-fill-1 text-2 text-xs/5 rounded;
  border: 1px solid var(---color-border-4, #dfe2e5);
  white-space: break-spaces;
  text-wrap: wrap;
  word-break: break-all;
  overflow-y: auto;
}

:deep(.arco-descriptions-row) {
  &:not(.arco-descriptions-row:first-child) {
    .arco-descriptions-item {
      @apply w-1/2 pt-4;
    }
  }

  .arco-descriptions-item {
    .arco-descriptions-item-label {
      @apply text-4 font-400;
    }

    .arco-descriptions-item-value {
      @apply text-2;
    }
  }
}

:deep(.arco-radio-group-button) {
  border-radius: var(--border-radius-lg, 8px);
  .arco-radio-button {
    border-radius: var(--border-radius-lg, 6px);
  }
}
</style>
